<script setup lang="ts">
import { ref, toRaw } from 'vue'
import { useRouter } from 'vue-router';
import PublishList from "../../components/publishList.vue"
import DeleteList from "../../components/deleteList.vue"

const activeKey = ref('1');
const router:any = useRouter()
const routes = [
  {
    path: '/',
    breadcrumbName: '首页',
  },
  {
    path: '/articleList',
    breadcrumbName: toRaw(router).currentRoute.value.name,
  }
];
const onChange = (e:any) => {
  activeKey.value = e
}
</script>
<template>
  <div class="articleList">
    <a-page-header
        style="padding-bottom:0;padding-left:0;padding-top: 0;"
        title=""
        sub-title=""
         :breadcrumb="{ routes }"
        @back="() => $router.back()"
    />
    <a-tabs v-model:activeKey="activeKey" @change="onChange">
      <a-tab-pane key="1" tab="发布列表">
        <PublishList :activeKey="activeKey"></PublishList>
      </a-tab-pane>
      <a-tab-pane key="2" tab="文章列表" force-render>
        <DeleteList :activeKey="activeKey"></DeleteList>
      </a-tab-pane>
    </a-tabs>
  </div>
</template>

<style scoped>

</style>
